<template>
  <Row>
    <Col span="24">
      <ButtonGroup>
        <Button type="primary" v-if="groupManager_btn_add" @click="handleAdd">添加</Button>
        <Button type="primary" v-if="groupManager_btn_edit" @click="handleEdit">编辑</Button>
        <Button type="primary" v-if="groupManager_btn_del" @click="handleDelete">删除</Button>
        <Button type="success" v-if="groupManager_btn_resourceManager" @click="handleAuthority">权限分配</Button>
        <Button type="success" v-if="groupManager_btn_userManager" @click="handleUser">关联用户</Button>
        <Button type="warning" v-if="groupManager_btn_authorizeManager" @click="handleAuthorize">权限下发</Button>
      </ButtonGroup>
    </Col>
    <Col span="8">
      <Input placeholder="输入关键字进行过滤" v-model="filterText"/>
      <Tree :data="treeData" ref="groupTree" :render="renderContent"></Tree>
    </Col>
    <Col span="16">
      <Form ref="form" :model="form" :label-width="100" :rules="rules">
        <FormItem label="名称" prop="name">
          <Input v-model="form.name" placeholder="请输入名称" :disabled="formEdit"/>
        </FormItem>
        <FormItem label="编码" prop="code">
          <Input v-model="form.code" :disabled="formEdit"/>
        </FormItem>
        <FormItem label="描述" prop="description">
          <Input v-model="form.description" placeholder="请输入描述" :disabled="formEdit"/>
        </FormItem>
        <FormItem v-if="formStatus == 'update'">
          <Button type="primary" v-if="groupManager_btn_edit" @click="update('form')">更 新</Button>
          <Button type="text" @click="onCancel">取消</Button>
        </FormItem>
        <FormItem v-if="formStatus == 'create'">
          <Button type="primary" v-if="groupManager_btn_add" @click="create('form')">保 存</Button>
          <Button type="text" @click="onCancel">取消</Button>
        </FormItem>
      </Form>
    </Col>
    <Modal :title="dialogAuthorityName" v-model="dialogAuthorityVisible" :mask-closable='false' width="55">
      <group-authority :groupId="currentId" @closeAuthorityDialog="closeAuthorityDialog" ref="groupAuthority"></group-authority>
      <div slot="footer"></div>
    </Modal>
    <Modal :title="dialogAuthorizeName" v-model="dialogAuthorizeVisible" :mask-closable='false' width="55">
      <group-authorize :groupId="currentId" @closeAuthorizeDialog="closeAuthorizeDialog" ref="groupAuthorize"></group-authorize>
      <div slot="footer"></div>
    </Modal>
    <Modal :title="dialogUserName" v-model="dialogUserVisible" :mask-closable='false' width="20">
      <group-user :groupId="currentId" @closeUserDialog="closeUserDialog" ref="groupUser"></group-user>
      <div slot="footer"></div>
    </Modal>
  </Row>
</template>
<script>
import {
  fetchTree,
  getObj,
  addObj,
  delObj,
  putObj
} from '@/api/admin/group/index'
import { mapGetters } from 'vuex'
import GroupUser from './groupUser'
import GroupAuthority from './groupAuthority'
import GroupAuthorize from './groupAuthorize'
import { convertTree } from '@/libs/util'
export default {
  name: 'groupDetail',
  components: {
    'group-user': GroupUser,
    'group-authority': GroupAuthority,
    'group-authorize': GroupAuthorize
  },
  props: {
    type: {
      default: '1'
    }
  },
  data () {
    return {
      filterText: '',
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: '',
      dialogUserVisible: false,
      dialogUserName: '关联用户',
      dialogAuthorityVisible: false,
      dialogAuthorityName: '关联资源',
      dialogAuthorizeVisible: false,
      dialogAuthorizeName: '权限下发',
      listQuery: {
        groupType: this.type,
        name: undefined
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      labelPosition: 'right',
      groupManager_btn_edit: false,
      groupManager_btn_del: false,
      groupManager_btn_add: false,
      groupManager_btn_userManager: false,
      groupManager_btn_resourceManager: false,
      groupManager_btn_authorizeManager: false,
      form: {
        code: undefined,
        name: undefined,
        description: undefined,
        groupType: this.type
      },
      rules: {
        code: [
          {
            required: true,
            message: '请输入编码',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20 个字符',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20 个字符',
            trigger: 'blur'
          }
        ]
      },
      currentId: -1
    }
  },
  watch: {
    filterText (val) {
      this.$refs.groupTree.filter(val)
    }
  },
  created () {
    this.getList()
    this.groupManager_btn_add = this.elements['groupManager:btn_add']
    this.groupManager_btn_edit = this.elements['groupManager:btn_edit']
    this.groupManager_btn_del = this.elements['groupManager:btn_del']
    this.groupManager_btn_userManager = this.elements['groupManager:btn_userManager']
    this.groupManager_btn_resourceManager = this.elements['groupManager:btn_resourceManager']
    this.groupManager_btn_authorizeManager = this.elements['groupManager:btn_authorizeManager']
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    renderContent (h, { root, node, data }) {
      return h('span', {
        class: {
          // 'ivu-tree-title-selected': node.selected === true,
          'ivu-tree-title': true
          // 'ivu-tree-title-selected': node.checked
        },
        on: {
          click: () => {
            // this.getTreeNodeData(data)
            // this.set(node,'selected',true)
            this.getNodeData(data, node)
          }
        }
      }, data.title)
    },
    getList () {
      fetchTree(this.listQuery).then(data => {
        const map = {
          value: 'id',
          label: 'label',
          children: 'children'
        }
        this.treeData = convertTree(data, map)
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getNodeData (data, node) {
      // const nodes = this.$refs.groupTree.getSelectedNodes()
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      getObj(data.id).then(response => {
        this.form = response.data
      })
      this.currentId = data.id
      // node.selected = true
      // this.$set(node, 'checked', true)
    },
    handleEdit () {
      if (this.form.id) {
        this.formEdit = false
        this.formStatus = 'update'
      }
    },
    handleAdd () {
      this.resetForm()
      this.formEdit = false
      this.formStatus = 'create'
    },
    handleDelete () {
      this.$Modal.confirm({
        title: '提示',
        content: '此操作将永久删除用户, 是否继续?',
        onOk: () => {
          delObj(this.currentId).then(() => {
            this.getList()
            this.currentId = -1
            this.resetForm()
            this.onCancel()
            this.$Notice.success({
              title: '成功',
              desc: '删除成功'
            })
          })
        }
      })
    },
    update (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          putObj(this.form.id, this.form).then(() => {
            this.getList()
            this.$Notice.success({
              title: '成功',
              desc: '修改成功'
            })
          })
        } else {
          return false
        }
      })
    },
    create (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          addObj(this.form).then(() => {
            this.getList()
            this.$Notice.success({
              title: '成功',
              desc: '创建成功'
            })
          })
        } else {
          return false
        }
      })
    },
    onCancel () {
      this.formEdit = true
      this.formStatus = ''
    },
    resetForm () {
      this.form = {
        parentId: this.currentId,
        code: undefined,
        name: undefined,
        description: undefined,
        groupType: this.type
      }
    },
    handleUser () {
      this.dialogUserVisible = true
      if (this.$refs.groupUser !== undefined) {
        this.$refs.groupUser.groupId = this.currentId
        this.$refs.groupUser.initUsers()
      }
    },
    handleAuthority () {
      this.dialogAuthorityVisible = true
      if (this.$refs.groupAuthority !== undefined) {
        this.$refs.groupAuthority.groupId = this.currentId
        this.$refs.groupAuthority.getList()
      }
    },
    handleAuthorize () {
      this.dialogAuthorizeVisible = true
      if (this.$refs.groupAuthorize !== undefined) {
        this.$refs.groupAuthorize.groupId = this.currentId
        this.$refs.groupAuthorize.getList()
      }
    },
    closeAuthorizeDialog () {
      this.dialogAuthorizeVisible = false
    },
    closeUserDialog () {
      this.dialogUserVisible = false
    },
    closeAuthorityDialog () {
      this.dialogAuthorityVisible = false
    }
  }
}
</script>
